<template>
  <el-container class="agent-select">
    <el-header class="sa-header">
      <div class="tip sa-m-t-20">
        温馨提示：更换上级推荐人之后，该用户之后的所有团队和业绩将移至新的推荐人名下
      </div>
      <div class="sa-flex sa-flex-wrap sa-row-between sa-m-t-20">
        <div class="sa-flex">
          当前推荐人：
          <sa-user-profile
            type="agent"
            :user="state.userInfo.parent_user"
            :id="state.userInfo.parent_user_id"
            :isHover="false"
          />
        </div>
        <el-input class="sa-w-332" v-model="state.search.user.value" placeholder="请输入查询内容">
          <template #prepend>
            <el-select class="sa-w-108" v-model="state.search.user.field">
              <el-option label="分销商ID" value="user_id" />
              <el-option label="分销商昵称" value="user.nickname" />
              <el-option label="分销商手机号" value="user.mobile" />
            </el-select>
          </template>
          <template #append>
            <button @click="getData(1)">搜索</button>
          </template>
        </el-input>
      </div>
    </el-header>
    <el-main>
      <el-table class="sa-table" :data="state.tableData" stripe>
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column prop="user_id" label="ID" min-width="90" />
        <el-table-column label="分销商信息" min-width="150">
          <template #default="scope">
            <sa-user-profile :user="scope.row.user" :id="scope.row.user_id" :isHover="false" />
          </template>
        </el-table-column>
        <el-table-column label="等级" min-width="150" align="center">
          <template #default="scope">
            <template v-if="scope.row.level_info">
              {{ scope.row.level_info.name }}
              (等级{{ scope.row.level_info.level }})
            </template>
            <template v-else>{{ scope.row.level }}</template>
          </template>
        </el-table-column>
        <el-table-column label="手机号" min-width="120" align="center">
          <template #default="scope">
            {{ scope.row.user ? scope.row.user.mobile : '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="80" fixed="right">
          <template #default="scope">
            <span v-if="scope.row.user_id == state.selectedId" class="status"> 已选择 </span>
            <el-button v-else class="is-link" type="primary" @click="onSelect(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer class="sa-flex sa-row-between">
      <el-checkbox v-model="state.selectedId" :true-label="0" :false-label="-1"
        >设为平台直推</el-checkbox
      >
      <sa-pagination :pageData="pageData" @updateFn="getData" />
    </el-footer>
    <el-footer class="sa-footer--submit">
      <el-button type="primary" @click="confirm">确定</el-button>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'changeParent',
  };
</script>

<script setup>
  import { onMounted, reactive } from 'vue';
  import { api as commissionApi } from '../commission.service';
  import userApi from '@/app/user/api';
  import { composeFilter } from '@/sheep/utils';
  import { usePagination } from '@/sheep/hooks';
  import { ElMessage } from 'element-plus';
  import { cloneDeep } from 'lodash';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps(['modal']);

  const state = reactive({
    selectedId: null,
    userInfo: {},
    loading: false,
    tableData: [],
    search: {
      user: {
        field: 'user_id',
        value: '',
      },
    },
  });

  async function getUserInfo() {
    const { error, data } = await userApi.detail(props.modal.params.id);
    if (error == 0) {
      state.userInfo = data;
      state.selectedId = state.userInfo.parent_user_id;
    }
  }

  const { pageData } = usePagination();

  async function getData(page) {
    state.loading = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(state.search);
    let search = composeFilter(tempSearch, {
      'user.nickname': 'like',
      'user.mobile': 'like',
    });
    const { data } = await commissionApi.agent.select({
      page: pageData.page,
      list_rows: pageData.list_rows,
      ...search,
    });
    state.tableData = data.data;
    pageData.page = data.current_page;
    pageData.list_rows = data.per_page;
    pageData.total = data.total;
    state.loading = false;
  }

  function onSelect(row) {
    state.selectedId = row.user_id;
  }

  async function confirm() {
    if (state.selectedId == -1) {
      ElMessage.info('请选择上级');
      return;
    }
    const { error } = await commissionApi.agent.changeParentUser(state.userInfo.id, {
      parent_user_id: state.selectedId,
    });
    if (error == 0) {
      emit('modalCallBack', { event: 'confirm' });
    }
  }

  onMounted(() => {
    getUserInfo();
    getData();
  });
</script>
<style lang="scss" scoped>
  .agent-select {
    font-size: 14px;
    font-weight: 400;
    color: var(--sa-subtitle);
    .sa-header {
      --el-header-padding: 0 20px;
    }
    .tip {
      line-height: 16px;
      font-size: 12px;
      font-weight: 500;
      color: var(--sa-font);
    }
    .status {
      color: #999999;
    }
  }
</style>
